<template>
  <div>
    <!--货代搜索-->
    <div style="padding: 20px; background-color: #f5f7fa; border-radius: 8px">
      <el-form>
        <el-row>
          <el-col :span="5">
            <el-form-item label="货代公司名称" style="margin-left: 10px">
              <el-input v-model="filters.company_name" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="联系方式" style="margin-left: 15px">
              <el-input v-model="filters.phone" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="邮箱" style="margin-left: 15px">
              <el-input v-model="filters.email" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-button
              type="primary"
              style="margin-left: 15px"
              @click="initData"
              >搜索</el-button
            >
            <el-button type="primary" @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 添加货代 -->
    <div style="text-align: right">
      <el-button type="primary" @click="openAddDialog"> 增加 </el-button>
    </div>
    <!-- 添加货代对话框 -->
    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500">
      <el-form ref="addFrom" :model="forwarderForm" :rules="rules">
        <el-form-item label="账号" label-width="140px" prop="account">
          <el-input
            v-model="forwarderForm.account"
            :disabled="isEditMode"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="密码" label-width="140px" prop="password">
          <el-input
            v-model="forwarderForm.password"
            :disabled="isEditMode"
            type="password"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="货代公司名称" label-width="140px">
          <el-input v-model="forwarderForm.company_name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系人" label-width="140px">
          <el-input v-model="forwarderForm.contacts" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系电话" label-width="140px">
          <el-input v-model="forwarderForm.phone" placeholder="请输入" />
        </el-form-item>
        <el-form-item
          v-model="forwarderForm.email"
          label="邮箱"
          label-width="140px"
        >
          <el-input v-model="forwarderForm.email" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="运输方式" :label-width="formLabelWidth">
          <el-select
            v-model="forwarderForm.transport"
            placeholder="海运/铁路/公路/空运/多联式/散货"
          >
            <el-option
              v-for="item in transportWay"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="擅长航线" label-width="140">
          <el-select
            v-model="forwarderForm.route"
            placeholder="请选择 (内销 / 外销)"
          >
            <el-option
              v-for="item in marketOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="save"> 保存 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 货代列表 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      border
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column type="index" label="行号" width="80" />
      <el-table-column prop="company_name" label="货代公司名称" width="180" />
      <el-table-column prop="contacts" label="联系人" width="180" />
      <el-table-column prop="phone" label="联系方式" />
      <el-table-column prop="email" label="邮箱" width="180" />
      <el-table-column prop="created_at" label="创建时间" width="180" />
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            :icon="Edit"
            circle
            title="修改"
            @click="openEditDialog(row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div
      style="
        background-color: #fff;
        height: 50px;
        line-height: 50px;
        text-align: right;
      "
    >
      <el-pagination
        background
        :page-size="pageSize"
        :page-sizes="[1, 10, 20]"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
//引入api
import {
  queryForwarder,
  saveForwarder,
  updataForwarder,
  queryUser
} from "@/api/forwarder.js";
//引入图标
import { Edit } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus"; // 引入消息组件
//引入路由
import { useRouter } from "vue-router";

const isEditMode = ref(false); // 默认是添加模式
const tableData = ref([{ company_name: "1" }]);
//路由实例
const router = useRouter();

//查询数据--异步函数
async function initData() {
  let data = {
    pageNum: page.value,
    pageSize: pageSize.value,
    company_name: filters.value.company_name,
    email: filters.value.email,
    phone: filters.value.phone
  };
  //请求
  let res = await queryForwarder(data);
  if (res.code == 200) {
    tableData.value = res.data.data;
    //接收分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}
//过滤条件
const filters = ref({
  company_name: "",
  phone: "",
  email: ""
});
//重置
function reset() {
  filters.value = {
    company_name: "",
    phone: "",
    email: ""
  };
  initData();
}

//分页信息
const page = ref(1); //当前页 默认第1页
const pageSize = ref(10); //每页记录数
const total = ref(0); //总记录数
//每页记录数变化
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从每页开始查询
  page.value = 10;
  //查询数据
  initData();
}

//页面发生变化
function chgpg(pg) {
  //更改当前页
  page.value = pg;
  //查询数据
  initData();
}
//货单对话框
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";

// 对话框相关
const dialogTitle = ref("新增货代");
// 打开新增对话框
const openAddDialog = () => {
  isEditMode.value = false;
  dialogTitle.value = "新增货代";
  dialogFormVisible.value = true;
  initForm();
};

// 打开编辑对话框
async function openEditDialog(row) {
  dialogFormVisible.value = true;
  dialogTitle.value = "编辑货代";
  isEditMode.value = true;
  let res = await queryUser(row.id);
  if (res.code == 200) {
    forwarderForm.value = res.data;
  }
}

//更新保存货代
async function save() {
  if (forwarderForm.value.id) {
    //编辑
    let res = await updataForwarder(JSON.stringify(forwarderForm.value));
    dialogFormVisible.value = false;
    console.log(res);
  } else {
    //说明保存
    //验证规则--- 参数v代表的是验证的结果，
    addFrom.value.validate(async v => {
      if (v) {
        //保存
        let res = await saveForwarder(JSON.stringify(forwarderForm.value));
        if (res.code === 200) {
          console.log(111);
          dialogFormVisible.value = false;
          ElMessage.success("保存成功！");
        } else {
          initData();
          //取消对话框
          dialogFormVisible.value = true;
        }
      }
    });
  }
}
//验证规则
const rules = {
  account: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }]
};
//运输方式
const transportWay = [
  {
    label: "海运",
    value: 1
  },
  {
    label: "铁路",
    value: 2
  },
  {
    label: "公路",
    value: 3
  },
  {
    label: "空运",
    value: 4
  },
  {
    label: "多联式",
    value: 5
  },
  {
    label: "散货",
    value: 6
  }
];
//市场选项
const marketOptions = [
  {
    label: "内销",
    value: 1
  },
  {
    label: "外销",
    value: 2
  }
];
function initForm() {
  forwarderForm.value = {
    account: "",
    company_name: "",
    contacts: "",
    email: "",
    id: 0,
    password: "",
    phone: "",
    route: "",
    transport: ""
  };
}
const forwarderForm = ref({
  account: "",
  company_name: "",
  contacts: "",
  email: "",
  id: 0,
  password: "",
  phone: "",
  route: "",
  transport: ""
});
//表单引用 声明同时引用
const addFrom = ref();
//生命周期钩子
onMounted(() => {
  initData();
});
</script>

<style scoped></style>
